<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            user-select: none;
            box-sizing: border-box;
        }

        a {
            text-decoration: none;
        }

        input {
            border: none;
            outline: none;
            background-color: rgb(247, 247, 247);
        }

        h2 {
            color: rgb(21, 143, 197);
        }

        .regist {
            width: 100%;
            height: 100vh;
            background-image: url(background.87f99497.png);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .contain {
            width: 320px;
            height: 500px;
            background-color: rgb(247, 247, 247);
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }

        .contain>div {
            width: 70%;
            height: 6%;
            border-bottom: 1px solid #cdcdcd;
            position: relative;
        }

        .contain>div.error,
        .contain>div.error input {
            background-color: rgb(255, 220, 219);
        }

        .contain small {
            color: rgb(250, 79, 74);
            visibility: hidden;
            position: absolute;
            bottom: -17px;
            left: 0;
        }

        .contain>div.error small {
            visibility: visible;
        }

        .contain>div>input {
            width: 100%;
        }

        .verify {
            border: 0;
        }

        .verify div {
            display: flex;
            justify-content: space-between;
        }

        .verify input {
            width: 60%;
            border-bottom: 1px solid #cdcdcd;
        }

        .verify button {
            border: 0;
            background-color: rgb(21, 143, 197);
            padding: 6px 5px;
            border-radius: 5px;
            color: #fff;
        }

        .agree {
            display: flex;
            font-size: 12px;
            justify-content: center;
            align-items: start;
        }

        .agree input {
            width: 16px;
            height: 16px;
            margin-right: 5px;
        }

        .agree a {
            color: rgb(21, 143, 197);
        }

        .submit input {
            border: 0;
            background-color: rgb(21, 143, 197);
            padding: 8px 0px;
            color: #fff;
            font-size: 16px;
            border-radius: 8px;
        }
    </style>
</head>

<body>
    <div class="regist">
        <form action="#">
            <div class="contain">
                <h2>注册</h2>
                <div class="nickname">
                    <input type="text" id="nickname" placeholder="昵称">
                    <small></small>
                </div>
                <div class="tel">
                    <input type="text" id="tel" placeholder="手机号码">
                    <small></small>
                </div>
                <div class="email">
                    <input type="text" id="email" placeholder="邮箱">
                    <small></small>
                </div>
                <div class="password">
                    <input type="password" id="password" placeholder="密码">
                    <small></small>
                </div>
                <div class="repassword">
                    <!--  -->
                    <input type="password" id="repassword" placeholder="确认密码">
                    <small></small>
                </div>
                <div class="verify" style="border:0; background-color: #fff;">
                    <div>
                        <input type="text" placeholder="验证码" id="verify">
                        <button>获取验证码</button>
                    </div>
                    <small></small>
                </div>
                <div class="agree" style="border: 0;">
                    <input type="checkbox" style="width: 10px;" id="agree">
                    <label for="agree"><span>已阅读并同意</span><a href="#">《注册协议》</a><span>和</span><a
                            href="#">《个人信息保护政策》</a></label>
                </div>
                <div class="submit" style="border: 0;">
                    <input type="submit" value="注册">
                </div>
            </div>
        </form>
    </div>

    <script>
        // 获取元素
        const nickname = document.querySelector("#nickname");
        const tel = document.querySelector("#tel");
        const email = document.querySelector("#email");
        const password = document.querySelector("#password");
        const repassword = document.querySelector("#repassword");
        const verify = document.querySelector("#verify");
        const verifybtn = document.querySelector(".verify button");

        nickname.addEventListener('blur', () => {
            const nicknameValue = nickname.value.trim();
            nicknameValue === "" ? printError(nickname, "*请输入昵称") : removeError(nickname);
        })

        tel.addEventListener('blur', () => {
            const telValue = tel.value.trim();
            const regex = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
            if (telValue === "") {
                printError(tel, "*请输入手机号码");
            } else if (!regex.test(telValue)) {
                printError(tel, "手机号码格式有误");
            } else {
                removeError(tel);
            }
        })

        email.addEventListener('blur', () => {
            const emailValue = email.value.trim();
            const regex = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
            if (emailValue === "") {
                printError(email, "*请输入邮箱");
            } else if (!regex.test(emailValue)) {
                printError(email, "*邮箱格式有误");
            } else {
                removeError(email);
            }
        })

        password.addEventListener('blur', () => {
            const passwordValue = password.value.trim();
            const regex = /^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{8,18}$/;
            if (passwordValue === "") {
                printError(password, "*请输入密码")
            } else if (!regex.test(passwordValue)) {
                printError(password, "*必须由8-18位的字母和数字组成")
            } else {
                removeError(password);
            }
        })

        repassword.addEventListener('blur', () => {
            const passwordValue = password.value.trim();
            const repasswordValue = repassword.value.trim();
            if (repasswordValue === "") {
                printError(repassword, "*请确认密码");
            } else if (repasswordValue !== passwordValue) {
                printError(repassword, "*两次输入的密码不一致");
            } else {
                removeError(repassword);
            }
        })

        verify.addEventListener('blur', () => {
            const verifyValue = verify.value.trim();
            const regex = /^\d{6}$/;
            if (verifyValue === "") {
                printError(verify, "*请输入验证码");
            } else if (!regex.test(verifyValue)) {
                printError(verify, "*验证码格式错误");
            } else {
                removeError(verify);
            }
        })

        // 输出错误信息
        function printError(input, message) {
            const form = document.querySelector(`.${input.id}`);
            form.classList.add('error');
            form.querySelector("small").textContent = message;
        }

        // 取消错误信息
        function removeError(input) {
            const form = document.querySelector(`.${input.id}`);
            form.classList.remove('error');
            form.querySelector("small").textContent = "";
        }

        verifybtn.addEventListener('click', () => {
            verifybtn.disabled = true;
            verifybtn.style.backgroundColor = '#898989';
            let num = 60;
            let timer = setInterval(() => {
                if (num === 0) {
                    clearInterval(timer);
                    verifybtn.disabled = false;
                    verifybtn.style.backgroundColor = 'rgb(21, 143, 197)';
                    verifybtn.innerHTML = `获取验证码`;
                    num = 60;
                } else {
                    num--;
                    verifybtn.innerHTML = `剩余${num < 10 ? '0' + num : num}秒`;
                }
            }, 1000);
        })
    </script>
</body>

</html>